{% extends "base.html" %}
{% load display_tags %}
{% load authorization_tags %}
{% load event_tags %}
{% block content %}
    {{ block.super }}
    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    {{ name }}
                </div>
            </div>
            {% if questions %}
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=questions page_size=True %}
                </div>
                <div class="panel panel-default table-responsive">
                    <table id="groups" class="tablesorter-bootstrap table table-condensed table-striped">
                        <thead>
                        <tr>
                            <th>Text</th>
                            <th>Optional</th>
                            <th>Type</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for question in questions %}
                            <tr>
                                <td>
                                    {% if "dojo.change_question"|has_configuration_permission:request %}
                                    <a title="{{ question.text }}" href="{% url 'edit_question' question.id %}">{{ question.text }}</a>
                                    {% else %}
                                    {{ question.text }}
                                    {% endif %}
                                </td>
                                <td class="nowrap text-center">{{ question.optional|yesno|capfirst }}</td>
                                <td class="nowrap text-center">{{ question|content_type_str|capfirst }} </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=questions page_size=True %}
                </div>
            {% else %}
                No Questionnaires found.
            {% endif %}
        </div>
        <div class="col-md-2">
            <div class="panel panel-default filters">
                {% if filtered.form %}
                    {% if "dojo.add_question"|has_configuration_permission:request %}
                        <div class="panel-heading">Actions</div>
                        <div class="panel-body centered">
                            <a class="btn btn-sm btn-secondary" href="{% url 'create_question' %}">
                                Create Question
                            </a>
                        </div>
                    {% endif %}
                    <div class="panel-heading">Filters</div>
                    <form method="get" class="panel-body">
                        {% for field in filtered.form.visible_fields %}
                            <div class="form-group">
                                {{ field.errors }}
                                <label for="{{ field.auto_id }}" style="display: block;">{{ field.label }}</label>
                                {% with placeholder="placeholder:"|add:field.label %}
                                    {{ field|addcss:"class:form-control input-sm"|addcss:placeholder }}
                                {% endwith %}
                            </div>
                        {% endfor %}
                        <div class="centered">
                            <input type="submit" class="btn btn-secondary inline top" label="submit" value="Apply"/><br/><br/>
                            <a href="{% url 'questions' %}"> [Clear Filters] </a>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
        <div class="col-md-2">

        </div>
    </div>
{% endblock %}
